<template>
  <div class="tableRow" ref="tableRow">
    <el-table
      :data="data"
      class="dataTable"
      ref="dataTable"
      size="small"
      border
      v-horizontal-scroll="{bottom:42}"
    >
      <el-table-column label="ID" align="center" prop="connectionId" fixed/>
      <el-table-column :label="key" align="center" v-for="key in names" :prop="key"
                       :key="key"/>
    </el-table>
  </div>
</template>
<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import {connectionInfo} from "@/api/druidMonitor";
import erd from "element-resize-detector";

@Component({name: 'ConnectionInfo'})
export default class ConnectionInfo extends Vue {
  // 表格数据
  data: Array<any> = [];
  private names: Array<string> = ["useCount", "keepAliveCheckCount", "lastActiveTime", "connectTime", "holdability", "transactionIsolation", "autoCommit", "readoOnly"];

  getData() {
    connectionInfo(this.$route.query.id || '').then((response: any) => {
      this.data = response.data;
    }).catch((e) => {
      console.error(e);
    });
  }

  mounted() {
    this.onresize();
    this.getData();
  }

  $refs!: {
    dataTable: HTMLFormElement,
    tableRow: HTMLDivElement
  };

  onresize() {
    const container = this.$refs.dataTable.$el;
    erd().listenTo(container, () => {
      this.$nextTick(() => {
        if (this.$refs.tableRow) {
          this.$refs.tableRow.style.height = (this.$refs.dataTable && this.$refs.dataTable.$el.clientHeight) + 'px';
        }
      })
    })
  }
}
</script>

<style scoped lang="scss">
.tableRow {
  position: relative;
  margin-top: 10px;

  .dataTable {
    position: absolute;
  }
}
</style>

